<script setup>
import { defineProps, ref, watch, reactive, defineEmits, onMounted } from "vue";
import { UserFilled } from "@element-plus/icons-vue";
import { getLoginSession, getVipDetail, getVipList } from "@/apis/index.js";
import qrcode from "qrcode";
import { ElMessage } from "element-plus";

let props = defineProps({
  modelValue: {
    type: Boolean,
    require: true,
    default: false,
  },
  vipList: {
    type: Array,
    default: () => [],
  },
  vipDetail: {
    type: Object,
    default: () => {},
  },
});
let emits = defineEmits(["update:modelValue", "saveSubmit"]);
const dialogVisible = ref(props.modelValue); //显示弹窗
const selectedPlan = ref(2); // Default to quarterly plan

const isDialogVisible = ref(true);
const activeTab = ref("1");

const features = ref([
  { name: "分类功能筛选", free: false, vip: true },
  { name: "面积功能筛选", free: false, vip: true },
  { name: "颜色功能筛选", free: false, vip: true },
  {
    name: "时间选择筛选",
    free: false,
    vip: true,
  },
  { name: "时间段选择筛选", free: false, vip: true },
  { name: "分时切换", free: false, vip: true },
  {
    name: "每日筛选频次",
    free: false,
    freeText: "0次",
    vip: true,
    vipText: "12",
  },
  {
    name: "自动刷新频次",
    free: false,
    freeText: "20s",
    vip: true,
    vipText: "12s",
  },
]);
const state = reactive({
  pay: {},
  userInfo: {},
  vipInfo: {
    vid: 1,
    month: 1,
    duration: 30,
    durationText: "月",
  },
  time: null,
  vipDurationList: [],
});
onMounted(() => {});
//销毁
const close = () => {
  dialogVisible.value = false;
  emits("update:modelValue", false);
};
//监听value
watch(
  () => props.modelValue,
  async (value, o) => {
    dialogVisible.value = value;
    if (state.time) {
      clearInterval(state.time);
    }
    if (dialogVisible.value === true) {
      state.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      console.log("state.userInfo", state.userInfo);
      const { data } = await getVipList({
        vtype: 1,
      });
      state.vipDurationList = data.data;
      handleQrPay(activeTab.value);
      state.time = setInterval(() => {
        handleLoginSession();
      }, 10000);
    }
  },
);
const handleQrPay = async (vid) => {
  const { data } = await getVipDetail({ vid: vid });
  console.log(data);
  state.pay = data.data;
  switch (Number(state.pay.v_id)) {
    case 1:
      state.vipInfo = {
        vid: state.pay.v_id,
        duration: 30,
        month: 1,
        durationText: "月",
      };
      break;
    case 2:
      state.vipInfo = {
        vid: state.pay.v_id,
        month: 3,
        duration: 90,
        durationText: "季",
      };
      break;
    case 3:
      state.vipInfo = {
        vid: state.pay.v_id,
        month: 12,
        duration: 365,
        durationText: "年",
      };
      break;
    default:
      break;
  }
  qrcode.toDataURL(state.pay.v_code_img, (err, url) => {
    if (err) {
      console.error(err);
    } else {
      console.log(url);
      state.pay.v_code_img = url;
    }
  });
};
const handleLoginSession = async (gp_mid) => {
  state.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  const { data } = await getLoginSession({ gp_mid: state.userInfo?.m_id });
  // if (data.data.m_vip == 2) {
  //   ElMessage({
  //     message: "充值成功，恭喜您成为大盘云图会员",
  //     type: "success",
  //     duration: 2000,
  //   });
  // }
  state.userInfo.m_vip = data.data.m_vip;
  state.userInfo.m_vipetime = data.data.m_vipetime;
  localStorage.setItem("userInfo", JSON.stringify(state.userInfo));

  // window.location.reload();
  // }
};
const handleVipTabsChange = (tab) => {
  handleQrPay(tab);
};
</script>

<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="850px"
      :show-close="false"
      class="vip-modal"
      center
      @close="close"
    >
      <template #header>
        <div class="flex justify-between">
          <div class="flex items-center gap-2 mb-4">
            <el-avatar size="small" :icon="UserFilled" />
            <div class="">{{ state.userInfo?.m_mobile }}</div>
            <img
              v-if="state.userInfo?.m_vip == 2"
              src="@/assets/images/iconvip.png"
              alt=""
              class="w-8"
            />
            <div
              v-else-if="state.userInfo?.m_vip == 1"
              class="ml-auto text-sm text-gray-500"
            >
              您还不是VIP会员 加入尊享N项服务
            </div>
            <img v-else class="w-8" src="@/assets/images/svip.png" alt="" />
            <div
              v-if="state.userInfo?.m_vip != 1"
              class="ml-auto text-sm text-gray-500"
            >
              会员有效期至{{ state.userInfo?.m_vipetime }}
            </div>
          </div>
          <div class="flex justify-center align-top">
            <img class="h-7" src="@/assets/images/slogan.png" alt="" />
            <img
              @click="close"
              class="h-6 pl-2 cursor-pointer"
              src="@/assets/images/close.png"
              alt=""
            />
          </div>
        </div>
      </template>
      <div class="flex">
        <div class="bg-white rounded-lg relative">
          <el-tabs
            class="vip-tabs"
            v-model="activeTab"
            @tab-change="handleVipTabsChange"
          >
            <el-tab-pane
              v-for="item in state.vipDurationList"
              :label="item.v_name + '套餐'"
              :name="item.v_id"
            ></el-tab-pane>
            <!--            <el-tab-pane label="季度VIP套餐" name="quarterly"></el-tab-pane>-->
            <!--            <el-tab-pane label="月度VIP套餐" name="monthly"></el-tab-pane>-->
          </el-tabs>
          <div class="py-6 px-2">
            <div
              class="w-full bg-[#F0F3F8] rounded-lg text-lg font-bold text-[#2A2934] flex items-center"
            >
              <div class="p-3 text-left flex-[0.9]">特权对比</div>
              <div class="flex-[0.65] flex items-center justify-between">
                <div class="p-3 text-center">
                  <div>免费</div>
                  <div class="text-xs font-extralight">基础权限</div>
                </div>
                <div class="p-3 text-center">
                  <span class="flex justify-center items-end">
                    <span class="text-center text-xs">￥</span>
                    <span class="h-[22px] text-xl">{{ state.pay.v_price }}</span
                    ><span class="text-xs"
                      >/{{ state.vipInfo.durationText }}</span
                    >
                  </span>
                  <div class="mt-1 text-xs font-extralight">会员特权</div>
                </div>
              </div>
            </div>
            <table class="w-full bg-white">
              <tbody>
                <tr
                  v-for="(feature, index) in features"
                  :key="index"
                  class="border-b"
                >
                  <td class="p-3 text-left">{{ feature.name }}</td>
                  <td
                    class="p-3 text-center"
                    :class="[
                      feature.free ? 'text-[#ff911c]' : 'text-[#A8AFC4]',
                    ]"
                  >
                    {{
                      feature.freeText
                        ? feature.freeText
                        : feature.free
                          ? "✓"
                          : "✕"
                    }}
                  </td>
                  <td
                    class="p-3 text-center"
                    :class="[{ 'text-[#ff911c]': feature.vip }]"
                  >
                    {{
                      feature.vipText
                        ? feature.vipText
                        : feature.vip
                          ? "✓"
                          : "✕"
                    }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="w-full bg-[#FFFAF7] flex-center relative">
          <div class="w-[70%] grid text-center">
            <div class="w-full">
              <span class="font-bold text-xl text-[#383B47]"
                >{{ state.vipInfo.durationText }}度</span
              >
              <img
                v-if="state.vipInfo.vid == 3"
                class="pl-2 w-8"
                src="@/assets/images/svip.png"
                alt=""
              />
              <img
                v-else
                class="pl-2 w-8"
                src="@/assets/images/vip.png"
                alt=""
              />
            </div>
            <div
              class="w-full mt-5 rounded-l bg-white py-1 text-[#E79E78] text-xs border-solid border-[#E79E78] border-[1px] text-center"
            >
              会员时长：{{ state.vipInfo.duration }}天
            </div>
            <div class="qr-code">
              <el-image :src="state.pay.v_code_img" fit="contain" />
            </div>
            <img
              class="mt-2 w-20 m-auto"
              src="@/assets/images/wxzf_logo.png"
              alt=""
            />
            <div class="mt-2 text-[#B9B7BC]">请使用微信扫码支付</div>
            <div class="mt-6 flex-center">
              <img class="w-6 pr-2" src="@/assets/images/youhui.png" alt="" />
              <div class="text-[#B2B4BD] line-through">
                ￥88/月x{{ state.vipInfo.month }}月={{
                  88 * state.vipInfo.month
                }}
              </div>
            </div>
            <div
              class="mt-2 py-2 rounded-lg gap-1 flex-center border-[1px] border-solid border-[#E79E78] bg-[#FFF6EF]"
            >
              <img class="w-4" src="@/assets/images/quan.png" alt="" />
              <span class="font-bold">限时特惠</span>
              <span class="text-[#FF6E0B]"
                >最高-￥<span class="font-bold">{{
                  state.pay.v_discount
                }}</span>
              </span>
            </div>

            <div class="mt-4">
              <span class="">应付金额：</span>
              <span class="text-[#F27125] text-xl font-bold"
                >￥{{ state.pay.v_price_zhen }}</span
              >
            </div>
          </div>
          <img
            class="w-18 absolute top-[-1%] right-[-1%]"
            src="@/assets/images/jiaobiao.png"
            alt=""
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
:deep(.vip-modal) {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("@/assets/images/bgimg.jpg");
  .el-dialog__body {
    padding: 0;
  }
}

.vip-modal .vip-badge {
  background-color: #f4b400;
  color: white;
  padding: 0 5px;
  border-radius: 3px;
}

.text-vip {
  color: #ff911c;
}

.vip-modal table th,
.vip-modal table td {
  padding: 10px;
}
table {
  border-collapse: separate;
}

table tr th {
  background: transparent;
}
table tbody tr td {
  border-left: 1px solid transparent;
}
table tr:first-child th:first-child {
  border-top-left-radius: 12px;
}
table tr:first-child th:last-child {
  border-top-right-radius: 12px;
}
table tr td:last-child {
  border-right: 1px solid transparent;
}
table tr td {
  border-bottom: 1px solid transparent;
}
table tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
table tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

:deep(.vip-tabs) {
  height: 50px;
  display: block;
  background-color: #fff4e1;

  .el-tabs__header {
    margin: 0;
    height: 100%;
  }
  .el-tabs__item {
    width: 180px;
    height: 100%;
    color: black;
    font-weight: bold;
    font-size: 20px;
  }
  .el-tabs__active-bar {
    display: none;
  }
  .el-tabs__content {
    height: 0;
  }
  .el-tabs__nav {
    height: 100%;
    .el-tabs__item:nth-child(2).is-active {
      background-image: url("@/assets/images/meu_left.png");
    }
    .el-tabs__item:nth-child(3).is-active {
      background-image: url("@/assets/images/meu_center.png");
    }
    .el-tabs__item:nth-child(4).is-active {
      background-image: url("@/assets/images/meu_right.png");
    }
  }
  .is-active {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #8a6344;
  }
  .el-tabs__nav-wrap {
    height: 100%;
  }
  .el-tabs__nav-scroll {
    height: 100%;
  }
  .el-tabs__nav-wrap:after {
    display: none;
  }
}
</style>
